<template>
  <div class="app-page">
    <img class="logo" src="@/assets/logo.png" alt="" />
    <h1 class="h1">欢迎来到哈银金融</h1>
    <div class="tabs">
      <div
        class="tab"
        :class="{ active: activeTab == 'mobile' }"
        @click="onChangeWay('mobile')"
      >
        <span
          :style="{ background: activeTab == 'mobile' ? '#eb5f18' : '#bbbdbf' }"
        ></span>
        使用手机号登录
      </div>
      <div
        class="tab"
        :class="{ active: activeTab == 'userName' }"
        @click="onChangeWay('userName')"
      >
        <span
          :style="{
            background: activeTab == 'userName' ? '#eb5f18' : '#bbbdbf',
          }"
        ></span>
        使用账号登录
      </div>
    </div>
    <el-form ref="formRef" :model="formData" :rules="rules">
      <el-form-item prop="userName">
        <el-input
          class="elInput"
          size="large"
          v-model="formData.userName"
          :placeholder="activeTab == 'mobile' ? '请输入手机号' : '请输入账号'"
        >
          <template #prefix>
            <span class="jia86">+ 86</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="code" v-if="activeTab == 'userName'">
        <el-input
          class="elInput"
          size="large"
          v-model="formData.code"
          :type="passwordState == 'view' ? 'text' : 'password'"
          :placeholder="'请输入密码'"
        >
          <template #suffix>
            <el-icon>
              <Hide
                v-if="passwordState == 'hide'"
                @click="onCodeShow('view')"
              />
              <View v-else @click="onCodeShow('hide')" />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="code" v-else-if="activeTab == 'mobile'">
        <el-input
          class="elInput"
          size="large"
          v-model="formData.code"
          :placeholder="'请输入验证码'"
        >
          <template #suffix>
            <span class="getCode" v-if="downtime == 60" @click="onSendCode"
              >获取验证码</span
            >
            <span class="downtime" v-else>{{ downtime }}秒后重试</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="type">
        <el-checkbox-group v-model="formData.type">
          <el-checkbox value="read">
            <span class="read">
              同意 <span>《用户使用协议》</span> 及 <span>《建私权政策》</span>
            </span>
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <div class="login-btn" @click="submitForm()">进入哈银</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { View, Hide } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

const activeTab = ref("mobile");
const passwordState = ref("view");
const downtime = ref(60);
const formRef = ref();
const formData = reactive({
  userName: "",
  code: "",
});
const locationOptions = ["Home", "Company", "School"];
const rules = reactive({
  userName: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "change",
    },
  ],
});
const onChangeWay = (item) => {
  activeTab.value = item;
};
const onCodeShow = (item) => {
  passwordState.value = item;
};
const onSendCode = (item) => {
  const timer = setInterval(() => {
    downtime.value -= 1;
    if (downtime.value == 0) {
      clearInterval(timer);
      downtime.value = 60;
    }
  }, 1000);
};
const submitForm = async () => {
  router.push({ name: 'index' });
  if (!formRef.value) return;
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style lang="less" scoped>
.app-page {
  width: 100vw;
  height: 100vh;
  background-color: #fcf9f9;
  position: relative;
  padding: 100rem 160rem;
  box-sizing: border-box;
  &::after {
    width: 60%;
    height: 100%;
    background-image: url(@/assets/company.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    content: "";
  }
  .logo {
    width: 453rem;
    height: 65rem;
    margin-bottom: 174rem;
  }
  .h1 {
    font-family: Microsoft YaHei;
    font-size: 54rem;
    color: #283061;
    font-weight: normal;
    line-height: 55rem;
    margin-bottom: 15rem;
  }
  .tabs {
    display: flex;
    align-items: center;
    margin-bottom: 48rem;
    .tab {
      font-family: Microsoft YaHei;
      font-size: 18rem;
      line-height: 55rem;
      color: #bbbdbf;
      display: flex;
      align-items: center;
      margin-right: 55rem;
      span {
        display: inline-block;
        width: 7rem;
        height: 20rem;
        margin-right: 11rem;
      }
    }
    .active {
      color: #eb5f18;
    }
  }
  .jia86 {
    height: 36rem;
    line-height: 36rem;
    display: inline-block;
    font-family: Microsoft YaHei;
    font-size: 16rem;
    color: #434444;
    padding-right: 35rem;
    border-right: 2rem solid #bcbaba;
  }
  .elInput {
    width: 499rem;
    height: 70rem;
    background: #fcf9f9;
    border-radius: 34rem;
    overflow: hidden;
    outline: none;
    border: 2rem solid #bcbaba;
    background-color: none;
    font-size: 16rem;
  }
  .el-form-item {
    margin-bottom: 32rem;
  }
  /deep/.is-focus {
    box-shadow: none !important;
  }
  /deep/ .el-input__wrapper{
    box-shadow: none !important;
    padding: 1rem 20rem;

  }
  /deep/ .el-form-item__error {
    font-size: 16rem;
  }
  /deep/ .el-form-item.is-error .el-input__wrapper {
    box-shadow: none;
  }
  /deep/.el-checkbox .el-checkbox__inner {
    width: 24rem;
    height: 24rem;
  }
  .el-checkbox__inner:after {
    height: 7rem;
    left: 4rem;
  }
  .read {
    font-family: Microsoft YaHei;
    font-size: 16rem !important;
    color: #9a9b9b;
    line-height: 55rem;
    span {
      color: #eb5f18;
    }
  }
  .login-btn {
    width: 252rem;
    height: 73rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 31rem;
    color: #ffffff;
    line-height: 73rem;
    background: #eb5f18;
    border-radius: 36rem;
    text-align: center;
  }
}
</style>
